<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    打印模板设计器
  </title>
  <style>
    .visual-loading-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.7);
      z-index: 999999999;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #333;
      font-size: 12px;
    }

    .visual-circle-path {
      stroke: #009688;
      /* 给画笔设置一个颜色 */
      stroke-width: 2;
      /* 设置线条的宽度 */
      stroke-dasharray: 95, 126;
      /* 设置实现长95，虚线长126 */
      stroke-dashoffset: 0;
      /* 设置虚线的偏移位置 */
      animation: visual-loading-dash 1.5s ease-in-out infinite;
    }

    @keyframes visual-loading-dash {
      0% {
        stroke-dasharray: 1, 126;
        /* 实线部分1，虚线部分126 */
        stroke-dashoffset: 0;
        /* 前面1/126显示实线，后面125显示空白 */
      }

      50% {
        stroke-dasharray: 95, 126;
        /* 实线部分95，虚线部分126 */
        stroke-dashoffset: -31px
          /* 顺时针偏移31/126，即前31/126显示空白，后面3/4显示线条 */
      }

      to {
        stroke-dasharray: 6, 120;
        /* 实线部分6，虚线部分120 */
        stroke-dashoffset: -120px;
        /* 最后顺时针偏移120/126，即前120/126显示空白，后面6点显示线条部分 */
      }
    }

    .visual-loading-svg {
      width: 2.5em;
      height: 2.5em;
      max-width: 50px;
      /* 设置svg显示区域大小 */
      max-height: 50px;
      animation: visual-loading-rotate 1.5s infinite ease-in-out;
      /* 给svg也加上一个旋转动画 */
    }

    @keyframes visual-loading-rotate {
      to {
        transform: rotate(1turn);
        /* 旋转1圈 */
      }
    }
  </style>
</head>

<body>
  <noscript>
    <strong>We're sorry but print-template-designer doesn't work properly without JavaScript enabled. Please enable it
      to continue.</strong>
    <br />
    <strong style="color: red">很抱歉，您需要启用JavaScript，此网站才能正常使用，请启用JavaScript后刷新该页面。</strong>
  </noscript>
  <div id="roy-app">
    <div class="visual-loading-container">
      <svg viewBox="0 0 50 50" class="visual-loading-svg">
        <circle cx="25" cy="25" r="20" fill="none" class="visual-circle-path"></circle>
      </svg>
      <p>正在加载中......</p>
    </div>
  </div>
  <script>
    window.printTemplateVersionTime = parseInt('<%=new Date().getTime()%>');
  </script>
</body>

</html>
